import useLocale from '@/hooks/useLocale'
import { Card, Typography } from '@arco-design/web-react'
import { DonutChart } from 'bizcharts'
import local from './locale'
function ContentPercentage() {
  const t = useLocale(local)
  const data = [
    {
      type: '分类一',
      value: 27
    },
    {
      type: '分类二',
      value: 25
    },
    {
      type: '分类三',
      value: 18
    },
    {
      type: '分类四',
      value: 15
    },
    {
      type: '分类五',
      value: 10
    },
    {
      type: '其它',
      value: 5
    }
  ]

  return (
    <Card>
      <Typography.Title heading={6}>{t['workplace.contentPercentage']}</Typography.Title>
      <DonutChart
        data={data}
        autoFit
        height={340}
        radius={0.8}
        angleField="value"
        colorField="type"
        statistic={{
          title: {
            customHtml: () => '统计'
          }
        }}
        pieStyle={{ stroke: 'white', lineWidth: 4 }}
        onGetG2Instance={({ chart }) => {
          chart.removeInteraction('legend-filter')
        }}
      />
    </Card>
  )
}

export default ContentPercentage
